<template>
  <el-dialog
    title="用户使用协议"
    :visible.sync="dialogVisible"
    width="80%"
    top="5vh"
    v-el-drag-dialog 
    custom-class="agreement-dialog"
  >
    <div class="agreement-content">
      <!-- 协议内容容器 -->
      <div class="content-scroll">
        <pre class="agreement-text">{{ agreementContent }}</pre>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleDisagree">暂不同意</el-button>
      <el-button type="primary" @click="handleAgree">同意协议</el-button>
    </div>
  </el-dialog>
</template>
<script>
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui

export default {
  directives: { elDragDialog },
  name: 'UserAgreement',
  data() {
    return {
      dialogVisible: false,
      agreementContent: ``
    }
  },
  created(){
    this.loadText()
  },
  methods: {
    async loadText() {
      try {
        const response = await fetch('/用户隐私协议.txt');
        if (!response.ok) {
          throw new Error('无法加载文件');
        }
        this.agreementContent = await response.text();
      } catch (error) {
        this.agreementContent = '加载失败';
      }
    },
    openDialog() {
      this.dialogVisible = true
    },
    handleAgree() {
      this.$emit('agree')
      this.dialogVisible = false
    },
    handleDisagree() {
      this.$emit('disagree')
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss">
.agreement-dialog {
  .el-dialog__body {
    padding: 20px;
  }

  .agreement-content {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    height: 70vh;

    .content-scroll {
      height: 100%;
      overflow-y: auto;
      padding: 15px;
    }
  }

  .agreement-text {
    white-space: pre-wrap;
    font-family: "Microsoft YaHei", sans-serif;
    line-height: 1.8;
    font-size: 14px;
    color: #606266;

    // 重点条款样式
    strong {
      color: #f56c6c;
      text-decoration: underline;
    }
  }
}

@media (max-width: 768px) {
  .agreement-dialog {
    width: 90% !important;
    
    .agreement-content {
      height: 60vh;
    }
  }
}
</style>